<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getStudentsApi,
  addStudentApi,
  updateStudentApi,
  deleteStudentsApi,
  getStudentByIdApi,
} from '@/api/stu'
import { getClazzListApi } from '@/api/clazz'

const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const query = ref({
  name: '',
  degree: '',
  clazzId: '',
  page: 1,
  pageSize: 10,
})

const clazzList = ref([])
const fetchClazzList = async () => {
  const res = await getClazzListApi({
    name: '',
    begin: '',
    end: '',
    date: [],
    page: 1,
    pageSize: 100,
  })
  clazzList.value = res && res.data && res.data.rows ? res.data.rows : []
}

const dialogVisible = ref(false)
const dialogTitle = ref('添加学员')
const form = ref({})

const fetchData = async () => {
  loading.value = true
  const res = await getStudentsApi(query.value)
  tableData.value =
    res && res.data && (res.data.items || res.data.rows) ? res.data.items || res.data.rows : []
  total.value = res && res.data && res.data.total ? res.data.total : 0
  loading.value = false
}

onMounted(() => {
  fetchClazzList()
  fetchData()
})

const handleSearch = () => {
  query.value.page = 1
  fetchData()
}

const handleReset = () => {
  query.value.name = ''
  query.value.degree = ''
  query.value.clazzId = ''
  query.value.page = 1
  fetchData()
}

const handleAdd = () => {
  dialogTitle.value = '添加学员'
  form.value = {}
  dialogVisible.value = true
}

const handleEdit = async (row) => {
  const res = await getStudentByIdApi(row.id)
  dialogTitle.value = '编辑学员'
  form.value = { ...res.data }
  dialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该学员吗？', '提示', { type: 'warning' }).then(async () => {
    await deleteStudentsApi([row.id])
    ElMessage.success('删除成功')
    fetchData()
  })
}

const handleSubmit = async () => {
  if (form.value.id) {
    await updateStudentApi(form.value)
    ElMessage.success('修改成功')
  } else {
    await addStudentApi(form.value)
    ElMessage.success('添加成功')
  }
  dialogVisible.value = false
  fetchData()
}

const selectedRows = ref([])
const handleSelectionChange = (val) => {
  selectedRows.value = val
}
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要删除的学员！')
    return
  }
  ElMessageBox.confirm(`确定要删除选中的${selectedRows.value.length}个学员吗？`, '提示', {
    type: 'warning',
  }).then(async () => {
    const ids = selectedRows.value.map((item) => item.id)
    await deleteStudentsApi(ids)
    ElMessage.success('批量删除成功')
    fetchData()
  })
}

const scoreDialogVisible = ref(false)
const scoreForm = ref({ id: null, violationScore: null })
const handleEditScore = (row) => {
  scoreForm.value = { id: row.id, violationScore: row.violationScore }
  scoreDialogVisible.value = true
}
import { updateStudentScoreApi } from '@/api/stu'
const handleScoreSubmit = async () => {
  await updateStudentScoreApi(scoreForm.value.id, scoreForm.value.violationScore)
  ElMessage.success('违纪分修改成功')
  scoreDialogVisible.value = false
  fetchData()
}
</script>

<template>
  <div class="ai-bg">
    <div class="stu-container ai-glass">
      <div class="stu-header">
        <h1>学员管理</h1>
        <div>
          <el-button class="ai-btn" @click="handleAdd">新增学员</el-button>
          <el-button
            class="ai-btn ai-btn-danger"
            style="margin-left: 12px"
            @click="handleBatchDelete"
            >批量删除</el-button
          >
        </div>
      </div>
      <el-form :inline="true" class="stu-search" @submit.prevent="handleSearch">
        <el-form-item label="姓名">
          <el-input v-model="query.name" placeholder="姓名" clearable />
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="query.degree" placeholder="全部" clearable style="width: 120px">
            <el-option label="初中" value="1" />
            <el-option label="高中" value="2" />
            <el-option label="大专" value="3" />
            <el-option label="本科" value="4" />
            <el-option label="硕士" value="5" />
            <el-option label="博士" value="6" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="query.clazzId" placeholder="全部" clearable style="width: 140px">
            <el-option
              v-for="clazz in clazzList"
              :key="clazz.id"
              :label="clazz.name"
              :value="clazz.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearch" class="ai-btn">查询</el-button>
          <el-button @click="handleReset" class="ai-btn" style="margin-left: 8px">重置</el-button>
        </el-form-item>
      </el-form>
      <el-card class="table-card ai-glass">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :loading="loading"
          class="stu-table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column prop="gender" label="性别" align="center">
            <template #default="scope">{{ scope.row.gender === 1 ? '男' : '女' }}</template>
          </el-table-column>
          <el-table-column prop="no" label="学号" align="center" />
          <el-table-column prop="phone" label="手机号" align="center" />
          <el-table-column prop="clazzId" label="班级" align="center">
            <template #default="scope">
              {{ clazzList.find((c) => c.id === scope.row.clazzId)?.name || scope.row.clazzId }}
            </template>
          </el-table-column>
          <el-table-column prop="degree" label="学历" align="center">
            <template #default="scope">
              {{
                {
                  1: '初中',
                  2: '高中',
                  3: '大专',
                  4: '本科',
                  5: '硕士',
                  6: '博士',
                }[scope.row.degree] || scope.row.degree
              }}
            </template>
          </el-table-column>
          <el-table-column prop="graduationDate" label="毕业时间" align="center" />
          <el-table-column prop="violationScore" label="违纪扣分" align="center" />
          <el-table-column
            prop="updateTime"
            label="更新时间"
            align="center"
            width="180"
            show-overflow-tooltip
          />
          <el-table-column label="操作" align="center" width="320">
            <template #default="scope">
              <div class="action-group">
                <el-button class="action-btn ai-btn" @click="handleEdit(scope.row)"
                  >编辑信息</el-button
                >
                <el-button class="action-btn ai-btn" @click="handleEditScore(scope.row)"
                  >修改违纪分</el-button
                >
                <el-button class="action-btn ai-btn ai-btn-danger" @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="query.page"
          :page-size="query.pageSize"
          :total="total"
          layout="prev, pager, next, jumper"
          @current-change="fetchData"
          class="stu-pagination"
        />
      </el-card>
      <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="500"
        class="stu-dialog ai-glass"
      >
        <el-form :model="form" label-width="90px">
          <el-form-item label="姓名">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.gender" style="width: 120px">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="学号">
            <el-input v-model="form.no" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="form.idCard" />
          </el-form-item>
          <el-form-item label="是否院校">
            <el-select v-model="form.isCollege" style="width: 120px">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系地址">
            <el-input v-model="form.address" />
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="form.degree" style="width: 120px">
              <el-option label="初中" :value="1" />
              <el-option label="高中" :value="2" />
              <el-option label="大专" :value="3" />
              <el-option label="本科" :value="4" />
              <el-option label="硕士" :value="5" />
              <el-option label="博士" :value="6" />
            </el-select>
          </el-form-item>
          <el-form-item label="毕业时间">
            <el-date-picker v-model="form.graduationDate" type="date" value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="班级">
            <el-select v-model="form.clazzId" placeholder="请选择班级" style="width: 160px">
              <el-option
                v-for="clazz in clazzList"
                :key="clazz.id"
                :label="clazz.name"
                :value="clazz.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" class="ai-btn" @click="handleSubmit">提交</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog
        v-model="scoreDialogVisible"
        title="修改违纪分"
        width="400"
        class="stu-dialog ai-glass"
      >
        <el-form :model="scoreForm" label-width="100px">
          <el-form-item label="违纪分">
            <el-input-number v-model="scoreForm.violationScore" :min="0" :max="100" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="scoreDialogVisible = false">取消</el-button>
            <el-button type="primary" class="ai-btn" @click="handleScoreSubmit">提交</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped>
.ai-bg {
  min-height: 100vh;
  background: #f7f8fa;
  position: relative;
  overflow-x: hidden;
}
.stu-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 0 0 0;
  border-radius: 16px;
  background: transparent;
  border: none;
  box-sizing: border-box;
}
.ai-glass {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 16px 0 rgba(60, 72, 100, 0.06);
  border: 1px solid #f0f1f3;
}
.stu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 0 32px;
}
.stu-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #23272e;
  margin: 0;
}
.ai-btn {
  font-weight: 500;
  font-size: 15px;
  border-radius: 8px;
  padding: 7px 22px;
  background: #fff;
  color: #2563eb;
  border: 1px solid #2563eb;
  box-shadow: none;
  transition:
    background 0.15s,
    color 0.15s,
    border 0.15s;
}
.ai-btn:hover {
  background: #f3f4f6;
  color: #1d4fd7;
  border: 1px solid #1d4fd7;
}
.ai-btn-danger {
  background: #fff !important;
  color: #e11d48 !important;
  border: 1px solid #fca5a5 !important;
}
.ai-btn-danger:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}
.table-card {
  border-radius: 12px;
  box-shadow: 0 2px 16px 0 rgba(60, 72, 100, 0.06);
  border: 1px solid #f0f1f3;
  margin-bottom: 18px;
  background: #fff;
  padding: 0 24px 24px 24px;
}
.stu-table {
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  background: #fff;
}
.stu-table :deep(.el-table__header th) {
  background: #f7f8fa;
  color: #23272e;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid #f0f1f3;
}
.stu-table :deep(.el-table__row) {
  transition: background 0.2s;
  background: #fff;
}
.stu-table :deep(.el-table__row:hover) {
  background: #f7f8fa;
}
.stu-table :deep(.el-table__row--current) {
  background: #f3f4f6;
}
.stu-table :deep(.el-table__cell) {
  border-bottom: 1px solid #f0f1f3;
}
.action-group {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
}
.action-btn {
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  margin: 0 2px;
  transition:
    background 0.15s,
    color 0.15s,
    border 0.15s;
  box-shadow: none;
  min-width: 80px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #23272e;
  word-break: keep-all;
  white-space: nowrap;
}
.action-btn:hover {
  background: #f3f4f6;
  color: #23272e;
  border: 1px solid #d1d5db;
}
.stu-search {
  padding: 0 32px 18px 32px;
  background: transparent;
}
.stu-pagination {
  margin-top: 16px;
  text-align: right;
}
.stu-dialog {
  border-radius: 14px !important;
  box-shadow: 0 4px 24px 0 rgba(60, 72, 100, 0.1);
  overflow: hidden;
  border: 1px solid #f0f1f3;
  background: #fff !important;
  padding-bottom: 8px;
}
.stu-dialog :deep(.el-dialog__header) {
  background: #f7f8fa;
  border-bottom: 1px solid #f0f1f3;
  border-radius: 14px 14px 0 0;
  padding: 18px 24px 10px 24px;
}
.stu-dialog :deep(.el-dialog__title) {
  font-size: 1.15rem;
  font-weight: 700;
  color: #23272e;
}
.stu-dialog :deep(.el-dialog__headerbtn) {
  top: 18px;
  right: 18px;
}
.stu-dialog :deep(.el-dialog__body) {
  background: #fff;
  border-radius: 0 0 14px 14px;
  padding: 24px 32px 8px 32px;
}
.stu-dialog :deep(.el-form-item__label) {
  color: #23272e;
  font-weight: 500;
}
.stu-dialog :deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f7f8fa;
  box-shadow: none;
  transition: border 0.2s;
}
.stu-dialog :deep(.el-input__wrapper:hover),
.stu-dialog :deep(.el-input__wrapper.is-focus) {
  border: 1.5px solid #a5b4fc;
  background: #fff;
}
.dialog-footer {
  text-align: right;
  padding: 6px 0 0 0;
}
.dialog-footer .el-button {
  border-radius: 8px;
  background: #fff;
  color: #23272e;
  border: 1px solid #e5e7eb;
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s,
    border 0.15s;
  min-width: 80px;
}
.dialog-footer .el-button:hover {
  background: #f3f4f6;
  color: #23272e;
  border: 1px solid #d1d5db;
}
.dialog-footer .el-button--primary {
  background: #2563eb;
  color: #fff;
  border: 1px solid #2563eb;
}
.dialog-footer .el-button--primary:hover,
.dialog-footer .el-button--primary:focus {
  background: #1d4fd7;
  color: #fff;
  border: 1px solid #1d4fd7;
}
@media (max-width: 1200px) {
  .stu-container {
    max-width: 100%;
    padding: 16px 0 0 0;
  }
  .table-card {
    padding: 0 4px 12px 4px;
  }
  .stu-header,
  .stu-search {
    padding: 0 8px;
  }
}
</style>
